<%@ page import="service.MovieService" %>
<%@ page import="service.impl.MovieServiceImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="bean.Movie" %><%--
  Created by IntelliJ IDEA.
  User: Peter Zhou
 
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="js/bootstrap.bundle.js"></script>

<html>
<head>

    <title>电影院首页</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            overflow-x: hidden;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }
        nav {
            background-color: #444;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        nav a:hover {
            background-color: #555;
        }
        main {
            padding: 20px;
            text-align: center;
            position: relative;
        }
        .movie-container {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
        }
        .movie {
            flex: 0 0 auto;
            width: 300px;
            margin: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            text-decoration: none; /* New */
            color: inherit; /* New */
            transition: box-shadow 0.3s; /* 添加过渡效果 */
        }

        /* 新增悬停样式，加强阴影效果 */
        .movie:hover {
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
        }
        .movie img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
        .movie h2 {
            margin: 15px 20px 10px;
            font-size: 20px;
        }
        .movie p {
            margin: 0 20px 20px;
            font-size: 14px;
            color: #666;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2em;
            cursor: pointer;
            user-select: none;
            z-index: 1000;
            color: #333;
            background-color: #fff;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        .arrow-right {
            right: 10px;
        }
        .arrow-reset {
            left: 10px;
        }
        .movie a {
            display: block; /* Ensure the whole movie block is clickable */
            color: inherit; /* Keep the same text color */
            text-decoration: none; /* Remove underline */
        }
    </style>
    <%
        //项目根路径
        String projectPath = request.getContextPath();
//获得url根路径
      //  String urlPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;

//获得项目相对路径的真实路径 D:\学习\服装购买系统\ShoppingClothes\out\artifacts\ShoppingClothes_Web_exploded\img
        String WebPath = application.getRealPath("");
    %>
</head>
<body>
<header>
    <h1>欢迎来到电影院</h1>
</header>

<nav>
    <a href="index.jsp">首页</a>
    <a href="My_order.jsp">我的订单</a>
    <c:if test="${empty user}" >
    <a href="login.jsp">登录</a></c:if>
    <c:if test="${not empty user}" >
        <a href="login.jsp">${user.name}</a></c:if>
    <form method="post" action="find_movie" >
    <input type="search" placeholder="根据电影名称模糊查询" name="movieNameKey">
        <button type="submit">搜索</button>
    </form>
</nav>

<main>

    <div class="arrow arrow-right" onclick="scrollRight()">&#9654;</div>
    <div class="arrow arrow-reset" onclick="resetScroll()">&#9664;</div>
    <div class="movie-container" id="movieContainer">
       <% List<Movie> findMovies =(List<Movie>) request.getSession().getAttribute("findMovie");

    MovieServiceImpl movieService = new MovieServiceImpl();

    if(findMovies  == null || findMovies.size()==0){
        List<Movie> movieList =  movieService.getAllMovie();
        for(Movie movie : movieList){%>
        <a class="movie" href="Movie_detail.jsp" onclick="getMovieId(<%=movie.getId()%>);">
            <img src="../img/movie/<%=movie.getImg()%>" alt="<%=movie.getName()%>">
            <h2><%=movie.getName()%></h2>
        </a>
        <%}%>
    <%}else {
        for(Movie m : findMovies){%>
        <a class="movie" href="Movie_detail.jsp" onclick="getMovieId(<%=m.getId()%>);">
            <img src="../img/movie/<%=m.getImg()%>" alt="<%=m.getName()%>">
            <h2><%=m.getName()%></h2>
        </a><%}
        //使用后将其赋值为空
            request.getSession().setAttribute("findMovie",null);
    }%>




    </div>
</main>

<footer>
    <p>版权所有 &copy; 2024 电影院</p>
</footer>

</body>

<script>
    function scrollRight() {
        const container = document.getElementById('movieContainer');
        const scrollAmount = container.offsetWidth;

        container.scrollBy({
            left: scrollAmount,
            behavior: 'smooth'
        });
    }

    function resetScroll() {
        const container = document.getElementById('movieContainer');

        container.scrollTo({
            left: 0,
            behavior: 'smooth'
        });
    }
    function getMovieId(movieId){
        // 使用AJAX发送请求到服务器
        var xhr = new XMLHttpRequest();
        xhr.open("POST","get_movie",true); // 确保这里的 "get_movie" 是您Servlet的正确映射路径
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onreadystatechange = function () {
            // ... 省略了之前的 readyState 检查 ...
            if (xhr.readyState === 4) {
                if (xhr.status === 200) { // 检查响应状态码是否为200（成功）
                    console.log("请求已完成,且响应已就绪");
                    // 这里可以处理服务器的响应，或者进行页面刷新等操作
                    // 例如，您可能想要更新页面的某个部分，而不是整个页面刷新
                    // 如果确实需要页面刷新或跳转到另一个页面，可以在这里设置 window.location
                } else {
                    console.error("请求失败，状态码：" + xhr.status);
                }
            }
        };
        xhr.send("movieId=" + movieId); // 发送产品ID到服务器

        // 返回false或调用event.preventDefault()都可以阻止默认行为
        // 但由于我们使用了return，所以应该确保函数最后返回一个值
        // 阻止默认的链接点击行为
    }
</script>

</html>